<template>
	<div class="form">
		<div>
			<el-input v-model="filterData.id" placeholder="广告编号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click='query'>查询</el-button>
				<el-button type="info" @click="reset">重置</el-button>
			</p>
			<el-table border :data="tableData" style="width: 100%">
				<el-table-column prop="id" label="广告编号" width="100">
				</el-table-column>
				<el-table-column prop="type" label="广告类型" width="80" :formatter="formType">
				</el-table-column>
				<el-table-column prop="kind" label="广告分类" width="80" :formatter="formKind">
				</el-table-column>
				<el-table-column prop="title" label="banner标题" width="200">
				</el-table-column>
				<el-table-column prop="resourceUrl" label="资源地址" width="500">
				</el-table-column>
				<el-table-column prop="content" label="广告内容" width="200">
				</el-table-column>
				<el-table-column prop="cycle" label="可接广告周期" width="110">
				</el-table-column>
				<el-table-column prop="mode" label="投放模式" width="80" :formatter="formMode">
				</el-table-column>
				<el-table-column prop="amount" label="投放数量" width="80">
				</el-table-column>
				<el-table-column prop="unitPrice" label="投放单价(元)" width="110" :formatter='formunitPrice'>
				</el-table-column>				
			</el-table>		
			<el-pagination  small layout="prev, pager, next" :total="total">
			</el-pagination>
		</div>				
	</div>
</template>

<script type="text/javascript">
	import { regionDataPlus } from 'element-china-area-data'
	import {adPage,adInsert,formatter,adType,typeSelect} from '@/api/common'
	export default {
		created(){
			this.query();
			this.query_Peo();
			this.query_Area();
			this.queryAdType();
		},
		methods: {
			
			formType(row, column){		
				return(formatter(row.type,this.typeSelect))
			},
			formKind(row, column){		
				return(formatter(row.kind,this.kindSelect))
			},
			formMode(row, column){		
				return(formatter(row.mode,this.modeSelect))
			},
			formunitPrice(row, column){
				return parseInt(row.unitPrice) / 100;
			},
			queryAdType(){
				adType().then(res =>{
					this.kindSelect = res.data;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			query(){											//查询
				adPage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
					this.total = parseInt(res.data.total);
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			query_Peo(){										//查询
				
			},
			query_Area(){										//查询
				
			},
			reset(){										//重置
				this.filterData = {					 
					busId:this.$store.state.user.busId,				//商户id
					id: '', //广告编号		
					status:[0],
					current:1,
					size:10,
				}
				this.query();
			},
			reset_Peo(){										//重置
				this.filterDataPeople = {					 
					linkTarget: '', 		//链接地址
					areaid:[],				//地区
					ageF:null,				//开始年龄
					ageE:null,				//结束年龄
					sex:null,				//性别
					current:1,
					size:10,
				}
			},
			reset_Area(){										//重置
				this.filterDataArea = {					 
					address: '', 			//公司地址
					range:null,				//范围
					areaid:[],				//地区
					current:1,
					size:10,
				}
			},						
			issue_Peo(){
				
			},
			issue_Area(){
				
			},
		},
		data() {
			return {
				//主列表数据
				filterData:{	
					busId:this.$store.state.user.busId,				//商户id
					id: '', //广告编号	
					status:[0],
					current:1,
					size:10,
				},
				tableData: [],				//主列表数据
				total:null,
				checkData:{},
				//精准人群投放
				filterDataPeople:{
					linkTarget: '', 		//链接地址
					areaid:[],				//地区
					ageF:null,				//开始年龄
					ageE:null,				//结束年龄
					sex:null,				//性别
					current:1,
					size:10,
				},
				tableData_Peo: [],
				checkData_Peo:{},
				total_Peo:null,
				//精准地域人群投放
				filterDataArea:{
					address: '', 			//公司地址
					range:null,				//范围
					areaid:[],				//地区
					current:1,
					size:10,
				},
				tableData_Area: [],
				checkData_Area:{},
				total_Area:null,
				//辅助性数据
				options: regionDataPlus,			//地区选项

				sexSelect: [{ 						//性别下拉框
					value: 1,
					label: '男'
				}, {
					value: 0,
					label: '女'
				}],
				typeSelect: typeSelect,	
				kindSelect: [],					//广告分类
				modeSelect: [{ 					//投放模式
					value: 0,
					label: '转发'
				}, {
					value: 1,
					label: '阅读'
				}],
			}
		}
	}
</script>

<style scoped="scoped">
	.el-input{
		width:150px;
		margin-bottom: 20px;
	}
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
</style>